<template>
    <div>
        <x-header :left-options="{showBack: false}">我的课程</x-header>
        <tab>
            <tab-item selected @on-item-click="onItemClick">全部课程</tab-item>
            <tab-item @on-item-click="onItemClick">已签到</tab-item>
            <tab-item @on-item-click="onItemClick">已请假</tab-item>
            <tab-item @on-item-click="onItemClick">未签到</tab-item>
        </tab>
        <div class="show_all_class">

                <ul v-for="(item,index) in classall" class="all_class">
                    <li>
                        <i></i>
                        <span class="firstspan">{{item.subject}}</span>
                        <span v-show="item.state === '未签到'&&itemindex===0" class="yellowspan">{{item.state}}</span> 
                        <span v-show="item.state === '已签到'&&itemindex===0" class="bluespan">{{item.state}}</span>       
                        <span v-show="item.state === '已请假'&&itemindex===0" class="greyspan">{{item.state}}</span>       
                    </li>
                    <li>上课时间： {{item.time}}</li>
                    <li>上课地点： {{item.address}}</li>
                    <li>讲师： {{item. teacher}}</li>
                    <li class="hen">助教： {{item.assistant}}</li>
                    <div v-show="item.state === '未签到'" class="buttongroup">
                        <button class="swiper-button" :disabled="isDisabled" v-on:click="signin(index)">签到</button>
                    </div>
                    <li style="margin:0;height:10px;background-color:#f2f2f2;clear:both"></li>
                </ul>
            </div>
    </div>
</template>

<script>
import { Tab, TabItem, Group, Cell, XHeader, XButton } from 'vux'
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
    data() {
        return {
            isDisabled:false,
            httpmsg:'请求异常',
            title: 'class',
            itemindex:0,
            getGPS:false

        }
    },
    components:{
        XHeader,
        Tab,
        TabItem,
        Group,
        Cell,
        XButton
    },
    created(){
        this.init();
    },
    computed: {
        classall () {
            var classinfo = this.$store.state.user.myclass
            return classinfo
            console.log(classall)
        },
        errinfo(){
            var errinfo = this.$store.state.user.errinfo
            return errinfo
        }
    },
    methods:{
        ...mapActions({
            getMyClass:'getMyClass',
            signinClass:'signinClass',
        }),
        onItemClick (index) {
            console.log('on item click:', index)
            this.itemindex = index
            this.getClass(index)
        },
        init(){
            this.getClass(0)            
        },
        getClass(type){
            var param = {"pageindex":0,"pagesize":5,"type":type}
            this.getMyClass({ vue: this,param:param }).then(rs => {
                console.log("success")
            }).catch(error => {
                var errinfo = this.errinfo
                if(errinfo.code===400){
                     this.$vux.toast.text(errinfo.msg, 'default')
                }else if(errinfo.response&&(errinfo.response===undefined)){
                    this.$vux.toast.text('请求超时', 'default')
                }else{
                     this.$vux.toast.text(this.httpmsg+this.errinfo.response.data.error, 'default')
                }
                console.log(error)
            })
        },
        signinReq(param){
            this.isDisabled = true;
            this.signinClass({ vue: this, param: param }).then(rs => {
                setTimeout(() => {
                    this.isDisabled = false
                }, 1000)
                console.log("success")
                this.$vux.toast.text('签到成功', 'default')
                this.getClasseNotice({ vue: this }).then(rs => {
                    console.log("success")
                }).catch(error => {
                    this.$vux.toast.text(error, 'default')
                })
            }).catch(error => {
                  setTimeout(() => {
                    this.isDisabled = false
                }, 1000)
                var errinfo = this.errinfo
                if(errinfo.code===400){
                    this.$vux.toast.text(errinfo.msg, 'default')
                }else if(errinfo.response&&(errinfo.response===undefined)){
                    this.$vux.toast.text('请求超时', 'default')
                }else{
                    this.$vux.toast.text(this.httpmsg+this.errinfo.response.data.error, 'default')
                }
                console.log(error)
            }) 
        },
        signin(index){
            console.log("signin",index);
            var curclass = this.classall[index]
            var param = {'class_id':curclass.class_id,"subclass_id":curclass.subclass_id}
            console.log("signin param",param)
            debugger
            param["latitude"] = 0
            param["longitude"] = 0
            param["address"] = ""
            
            this.Util.YYBridge.do(
					"selectMap",
					{radius:100},
					rs => {
                        console.log(rs)
                        const {error_description, error_code, data} = JSON.parse(rs)
                        if (error_code === "0") {
                            const { latitude, longitude, addrstr } = data
                            param["latitude"] = latitude
                            param["longitude"] = longitude
                            param["address"] = addrstr
                        }else{
                            this.$vux.toast.text(error_description, 'default')
                        }    
                        this.signinReq(param)                    
					}
				)   
        }
    }
}
</script>

<style scoped>
    body{
        font-family: PingFangSC;
        margin: 0 auto; 
    }
    .lf{
        float: left;
    }
    .rt{
        float: right;
    }
    .mid_head{
        height:51px;
        background:#fff;
    }
    .mid_head .tips{
        width: 88px;
        height: 31px;
        line-height: 31px;
        font-size: 22px;
        background: #fff;
        padding: 0;
        margin-top:10px;
        margin-left:17.5px;
        font-family: PingFangSC-Regular;
    }
    .show_all_class{
        margin-bottom: 46px;
    }
    .all_class{
        background: #fff;
    }
    .all_class li:first-child{
        height:45px;
        color:#363636;
        border-bottom: 1px solid #EEEEEE 
    }
     .all_class li:nth-child(2){
        margin-top:10px;
    }
     .all_class .hen{
        height:32px;
        border-bottom: 1px solid #EEEEEE;
    }
    .all_class li:first-child>i{
        display: inline-block;
        height: 12px;
        width:2.5px;
        margin-top:15px;
        margin-left: 1px;
        background: #F25257;
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -o-transform: skew(10deg); 
        transform: skew(10deg);
    }
    .all_class li{
        font-size: 13px;
        height:22px;
        line-height:22px;
        margin-left: 17.5px;
        margin-right:16.5px;
        color:#5D5D5D ;
        font-family:  PingFangSC-Light;
        word-break:keep-all;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;   
    }
    .to_npage{
        margin:auto;
    }
    .to_npage .xbutton{
        width:69px;
        height:21px;
        margin-top:10px;
        margin-right:1px;
        font-family:  PingFangSC-Light;
        padding: 2px 8px;
        line-height:17px;
        border:0.5px solid #F25257;
        color:#F25257;
        background: #fff;
    }
    .add_class{
        width:35px;
        height:35px;
        position: fixed;
        top:86%;
        left:86%;
    }
    .buttongroup{
        margin-top:10px;
        height:31px;
        display:block;
        margin-right: 18px;
        float:right;
    }
    .swiper-button{
        height:21px;
        width:68px;
        border-style: solid; 
        border-width: 1px;
        border-radius:5px;
        border-color:#F25257;
        color: #F25257;
        background-color: #ffffff;
        font-size: 13px;
        outline:none;
    }
    .subject{
        margin-top:15px;
        float:right;
        background: antiquewhite;
        height:12px;
    }
    .subjectstate{
        font-size:11px;
        color: #ffffff;
        vertical-align:middle;
        text-align:center;
    }
    .firstspan{
        height:15px;
        width:90px;
        margin-top:15px;
        margin-left: 4px;
        font-size: 15px;
        font-family:  PingFangSC-Medium;
    }
    .yellowspan{
        margin-top:13px;
        float:right;
        font-size:11px;
        color: #ffffff;
        vertical-align:middle;
        text-align:center;
        font-family:  PingFangSC-Light;
        width:36px;
        background-color: #FFD658;
    }
    .bluespan{
        margin-top:13px;
        float:right;
        font-size:11px;
        color: #ffffff;
        vertical-align:middle;
        text-align:center;
        font-family:  PingFangSC-Light;
        width:36px;
        background-color: #8ED1F3;
    }
    .greyspan{
        margin-top:13px;
        float:right;
        font-size:11px;
        color: #ffffff;
        vertical-align:middle;
        text-align:center;
        font-family:  PingFangSC-Light;
        width:36px;
        background-color: #e0e0e0;
    }
</style>
